<template>
  <el-upload
    class="upload-media"
    :action="url"
    :data="fileUploadData_"
    :show-file-list="false"
    :accept="accept"
    :limit="limitUploadNum"
    multiple
    :on-exceed="onExceed"
    :before-upload="beforeUpload"
    :on-progress="onProgress"
    :on-success="onSuccess">
    <div class="btn-upload"><i class="jy-icon-upload"></i><span class="font-14">{{item.uploadTxt}}</span></div>
  </el-upload>
</template>
<style>
</style>

<script>
import { getValueFromXml,randomUploadFileName } from '@/plugins/utils'
import { mapActions, mapState } from 'vuex'
import { reactive } from 'vue'
import { MEDIAS } from '@/common/const'

export default {
  setup () {
    const state =  reactive({
      accept: "",
      extentions: "",
      reg: "",
      type: 1,
      fileList: [],
    })
    const state_ = {
      limitUploadNum: 100,
      isDebug: process.env.NODE_ENV === 'production' ? false : true,
    }
    _.merge(state, state_)
    return state
  },
  props:{
    url: String,
    fileUploadData: Object,
    item: Object,
  },
  created(){
  },
  computed: {
    ...mapState({
      siteStatus: (state) => _.cloneDeep(state.components.siteStatus),
      site_id: (state) => state.components.id
    }),
    fileUploadData_(){
      return  _.cloneDeep(this.fileUploadData)
    }
  },
  mounted(){
    this.refreshUploadFileType();
  },
  methods: {
    ...mapActions({
      saveImgToServer:"user/saveImgToServer",
      addMediaItem:"user/addMediaItem"
    }),
    refreshUploadFileType(){
      if(this.siteStatus.isUploadFile){
        this.accept = "*";
        this.extentions = "*";
        this.size = 1024 * 1024 * 15;
      }else if(this.item.type == MEDIAS.image.type){
        this.size = 1024 * 1024 * parseInt(this.siteStatus.uploadImgSize);
        this.accept = "image/png,image/gif,image/jpeg,image/webp";
        this.extentions = "gif,jpg,jpeg,png,webp"
        this.reg = new RegExp(!/\.(jpeg|jpe|jpg|gif|png|webp)$/i);
      }else if(this.item.type == MEDIAS.audio.type){
        this.size = 1024 * 1024 * 5;
        this.accept = "audio/mp3,audio/mpeg";
        this.extentions = "mp3";
        this.reg = new RegExp(!/\.(mp3)$/i);
      }else if(this.item.type == MEDIAS.video.type){
        // this.chunkEnabled = true;
        this.size = 1024 * 1024 * 15;
        this.accept = "audio/mp4,video/mp4";
        this.extentions = "mp4";
        this.reg = new RegExp(!/\.(mp4)$/i);
      }
    },
    onExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limitUploadNum} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeUpload(file){
      let isJPG = false;
      if(this.siteStatus.isUploadFile){
        isJPG = true;
      }else if(this.item.type == MEDIAS.image.type){
        if(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpeg'){
          isJPG = true
        }
        this.size = 1024 * 1024 * parseInt(this.siteStatus.uploadImgSize);
      }else if(this.item.type == MEDIAS.audio.type){
        if(file.type === 'audio/mpeg' || file.type === 'audio/mp3'){
          isJPG = true
        }
        this.size = 1024 * 1024 * 5;
        this.accept = "audio/mp3,audio/mpeg";
        this.extentions = "mp3";
        this.reg = new RegExp(!/\.(mp3)$/i);
      }else if(this.item.type == MEDIAS.video.type){
        if(file.type === 'audio/mp4' || file.type === 'video/mp4'){
          isJPG = true
        }
        this.chunkEnabled = true;
        this.size = 1024 * 1024 * 15;
        this.accept = "audio/mp4,video/mp4";
        this.reg = new RegExp(!/\.(mp4)$/i);
      }

      const isLt2M = file.size > this.size;

      if (!isJPG) {
        this.$message.error('上传文件格式不对!');
        return false;
      }
      if (isLt2M) {
        this.$message.error(`上传文件大小不能超过 ${this.size/1024/1024}M !`);
        return false;
      }
      if(this.siteStatus.isUploadFile){
        this.fileUploadData_.key = this.fileUploadData.key + file.name;
      }else{
        let suffix = file.name.split(".")[1];
        this.fileUploadData_.key = this.fileUploadData.key + randomUploadFileName(this.site_id) + "." + suffix;
      }

      let item;
      if(this.item.type == MEDIAS.image.type){
        item = {loading:true,name: file.name};
      }else if(this.item.type == MEDIAS.audio.type){
        item = {loading:true,name: file.name};
      }else if(this.item.type == MEDIAS.video.type){
        item = {loading:true,name: file.name};
      }
      if(!this.siteStatus.isUploadFile && item && !isLt2M){
        this.addMediaItem({item, type: parseInt(this.item.type)});
      }
      return isJPG && !isLt2M;
    },
    onProgress(event, file, fileList){
      console.log(event, file, fileList);
    },
    onSuccess(response, file){
      let url = getValueFromXml(response);
      url = _.replace(url, 'http', 'https');
      url = _.replace(url, 'file', 'static');
      url = _.replace(url, '.s3.sinaapp.com', '');
      // this.uploadWbListImg({index: this.index, url});
      if(this.siteStatus.isUploadFile){
        console.log(url);
      }else{
        let data = {
          "url":url,
          "name":file.name,
          "type":this.item.type,//分类,暂时默认1,用处待定
          "suffix":file.raw.type,//后缀
          "size":file.size,//大小
          "site_id":'',//站点名称
        }
        data.fileType = this.item.type;
        if(this.item.isIcon) {
          this.$emit('change', data);
          // return false;
        }
        this.saveImgToServer(data);
      }
    },
  },
  updated(){
    this.refreshUploadFileType();
  },
}
</script>
